<template>
  <el-card>
    <el-row type="flex" justify="space-between" style="margin-bottom: 10px">
      <el-col>
        <el-button size="small" @click="handleBack">返回上一页</el-button>
        <span style="font-weight: bold; margin-left: 10px">{{ title }}</span>
      </el-col>
      <div>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-row>
    <el-form :model="formModel" label-width="150px" :rules="rules" ref="form">
      <el-card style="margin-bottom: 10px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="承运商名称" prop="name">
              <el-input
                style="width: 150px"
                v-model="formModel.name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系电话" prop="phoneNumber">
              <el-input
                style="width: 150px"
                v-model="formModel.phoneNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
              <el-form-item label="资质文件" prop="fileUrls">
                <file-upload
                  :isShowTip="false"
                  v-model="formModel.fileUrls"
                  :fileType="['png', 'jpg', 'jpeg']"
                ></file-upload>
              </el-form-item>
            </el-col> -->
        </el-row>
      </el-card>
      <el-card>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :row="4"
            v-model="formModel.remark"
            style="width: 900px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-card>
      <el-card style="margin-bottom: 10px; padding: 0 70px" v-if="formModel.id">
        <el-descriptions title="">
          <el-descriptions-item label="id" span="24">{{
            formModel.id
          }}</el-descriptions-item>
          <el-descriptions-item label="最后编辑时间" span="24">{{
            formModel.updateTime
          }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-form>
  </el-card>
</template>
<script>
import { userTypeList } from "@/configEnum";
import {
  addOrders,
  getOrders,
  updateOrders,
} from "@/api/service/purchase/carrier.js";
import { validatePhoneNumber } from "@/utils";
export default {
  components: {},
  data() {
    return {
      originName: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 数据范围选项
      dataScopeOptions: [
        {
          value: "1",
          label: "全部数据权限",
        },
        {
          value: "2",
          label: "自定数据权限",
        },
        {
          value: "3",
          label: "本部门数据权限",
        },
        {
          value: "4",
          label: "本部门及以下数据权限",
        },
        {
          value: "5",
          label: "仅本人数据权限",
        },
      ],
      deptOptions: [],
      // 菜单列表
      menuOptions: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入承运商名称",
            trigger: "change",
          },
        ],
        abName: [
          {
            required: true,
            message: "请输入承运商简称",
            trigger: "change",
          },
        ],
        socialCreditCode: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "change",
          },
        ],
        responsible: [
          {
            required: true,
            message: "请输入负责人",
            trigger: "change",
          },
        ],
        phoneNumber: validatePhoneNumber(),
        fileUrls: [
          {
            required: true,
            message: "请上传资质文件",
            trigger: "change",
          },
        ],
      },
      subAccountTitle: "新增子账号",
      subFormModel: {
        name: undefined,
        userName: undefined,
        phone: undefined,
        status: true,
      },
      subAccountVisible: false,
      subAccountList: [],
      userTypeList,
      formModel: {
        name: undefined,
        abName: undefined,
        socialCreditCode: undefined,
        responsible: undefined,
        phoneNumber: undefined,
        fileUrls: undefined,
      },
      dialogVisible: false,
      roleList: [], // 角色列表
      orgList: [], // 机构列表
      deptList: [], // 部门列表
      deptExpand: true,
      deptNodeAll: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        subjectId: null,
      },
    };
  },
  watch: {
    userType(n, o) {},
  },
  methods: {
    handleCardChange(val) {
      this.originName = "";
    },
    // 选择姓名弹框确认
    handleOnSubmit(userInfoId, name) {
      console.log(name);
      this.originName = name;
      this.formModel = { ...this.formModel, userInfoId };
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleValidateSuccess();
        } else {
          return false;
        }
      });
    },
    handleValidateSuccess() {
      if (!this.userId) {
        addOrders({
          ...this.formModel,
        }).then((res) => {
          console.log(res);
          this.handleOkToLink();
        });
      } else {
        updateOrders({
          ...this.formModel,
        }).then((res) => {
          console.log(res);
          this.handleOkToLink();
        });
      }
    },
    handleOkToLink() {
      this.$modal.msgSuccess("操作成功");
      // this.getUserInfo(this.userId);
      this.$router.push({
        path: "/purchase/carrier/index",
      });
    },
    handleBack() {
      this.$router.push({
        path: "/purchase/carrier/index",
      });
    },
    removeSubAccount(row) {
      this.$confirm("确定要删除此账号吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateSubAccount(row) {
      this.subAccountVisible = true;
      this.subAccountTitle = "修改子账号";
      this.subFormModel = {
        ...this.subFormModel,
        ...row,
      };
    },
    addSubAccount() {
      this.subAccountVisible = true;
    },
    handleSubClose() {},
    handleSelectName() {
      this.dialogVisible = true;
    },
    getUserInfo(userId) {
      if (userId) {
        getOrders(userId).then((response) => {
          console.log("11123", response);
          this.formModel = {
            ...this.formModel,
            ...response.data,
            ...response.sysUserInfo,
          };
        });
      }
    },
  },
  created() {
    this.userId = this.$route.query.id;
    if (this.userId) {
      this.getUserInfo(this.userId);
    }
  },
  computed: {
    title() {
      return !this.$route?.query?.id ? "新增承运商" : "修改承运商";
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-border {
  width: 200px;
}
</style>
